<template>
  <section class="contianer">
      <el-row  type="flex" justify="space-between">
          <!-- 顶部过滤列表 -->
          <div class="flights-content">
              <!-- 过滤条件 -->
              <div>
                  <el-row type="flex" justify="space-between">
                    <el-col :span="8">
                      <span style="font-size: 12px; padding: 10px; line-height: 48px;">
                        单程：{{ this.$route.query.departCity }}&nbsp;&nbsp;=>&nbsp;&nbsp;{{ this.$route.query.destCity }}
                        &nbsp;/&nbsp;
                        {{this.$route.query.departDate}}
                      </span>
                    </el-col>
                    <!-- 选择筛选条件 -->
                    <el-col :span="4" style="padding:10px">
                      <el-select size="mini" v-model="airport" placeholder="起飞机场" @change="handle">
                        <el-option v-for="(item,index) in flightsData.options.airport" :key="index" v-bind:label="item" v-bind:value="item"></el-option>
                      </el-select>
                    </el-col>

                    <el-col :span="4" style="padding:10px">
                      <el-select size="mini" v-model="ctime" placeholder="起飞时间" @change="handle">
                        <el-option v-for="(item,index) in flightsData.options.flightTimes" 
                          :key="index" 
                          v-bind:label="`${item.from}:00 - ${item.to}:00`" 
                          v-bind:value="`${item.from}-${item.to}`"
                          >
                        </el-option>
                      </el-select>
                    </el-col>
                    
                    <el-col :span="4" style="padding:10px">
                      <el-select size="mini" v-model="cCompany" placeholder="航空公司" @change="handle">
                        <el-option v-for="(item,index) in flightsData.options.company" :key="index" v-bind:label="item" v-bind:value="item"></el-option>
                      </el-select>
                    </el-col>
                    
                    <el-col :span="4" style="padding:10px">
                      <el-select size="mini" v-model="cSize" placeholder="机型" @change="handle">
                        <el-option v-for="(item,index) in sizeOptions" :key="index" v-bind:label="item.name" v-bind:value="item.size"></el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                  <el-row>
                    <span style="font-size: 14px;">&nbsp;&nbsp;&nbsp;筛选：</span>
                    <el-button size="mini" type="primary" round @click="clear">清空筛选</el-button>
                  </el-row>
              </div>
              
              <!-- 航班头部布局 -->
              <div>
                  <FlightsListHeader ></FlightsListHeader>
              </div>
              
              
              <!-- 航班信息 -->
              <div>
                  <FlightsItem v-bind:data="item" v-for="(item,index) in renderData" :key="index"></FlightsItem>
              </div>
              <el-row type="flex" justify="center">
                <!-- 设置选择页码框 -->
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="CurrentChange"
                  :current-page="PageIndex"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="PageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="cflightsData.length">
                </el-pagination>
              </el-row>
          </div>

          <!-- 侧边栏 -->
          <div class="aside">
                <div class="statement">
                    <el-row type="flex" justify="space-between" class="statement-list">
                        <el-col :span="8">
                            <i class="iconfont iconweibiaoti-_huabanfuben" style="color:#409EFF;"></i>
                            <span>航协认证</span>
                        </el-col>
                        <el-col :span="8">
                            <i class="iconfont iconbaozheng" style="color:green;"></i>
                            <span>出行保证</span>
                        </el-col>
                        <el-col :span="8">
                            <i class="iconfont icondianhua" style="color:#409EFF;"></i>
                            <span>7x24</span>
                        </el-col>
                    </el-row>
                    <p class="service-tel">
                        免费客服电话：4006345678转2
                    </p>
                </div>
                <div class="history">
                    <el-row type="flex" justify="space-between">
                      <h5 style="display: inline-block;">历史查询</h5>
                      <el-button size="mini" type="primary" round @click="clearRecord" style="height: 30px; margin-top: 20px;">清空记录</el-button>
                    </el-row>
                    <nuxt-link :to="`/air/flights?departCity=${item.departCity}&departCode=${item.departCode}&destCity=${item.destCity}&destCode=${item.destCode}&departDate=${item.departDate}`"  
                    v-for="(item, index) in this.$store.state.air.searchInfo"
                    :key="index" style="text-decoration: none; color: black;"
                    v-on:click.native="change"
                    >
                        <el-row type="flex" 
                        justify="space-between" 
                        align="middle"
                        class="history-item">
                            <div class="air-info">
                                <div class="to-from">{{item.departCity}} - {{item.destCity}}</div>
                                <p>{{item.departDate}}</p>
                            </div>
                            <span>选择</span>
                        </el-row>
                    </nuxt-link>
                </div>
              </div>
      </el-row>
  </section>
</template>

<script>
import FlightsListHeader from '@/components/air/FlightsListHeader.vue'
import FlightsItem from '@/components/air/FlightsItem.vue'
export default {
components:{FlightsListHeader,FlightsItem},
  data(){
      return {
        airsLog:[],
        sizeOptions:[
          {name:"大",size:"L"},
          {name:"中",size:"M"},
          {name:"小",size:"S"},
        ],
        //这里存放着原始数据
          flightsData:{
            flights:{},
            info:{},
            options:{}
          },
          cflightsData:{
            flights:{},
            info:{},
            options:{}
          },
          renderData:[],
          PageIndex:1,
          PageSize:5,
          airport:"",
          //记录筛选出来的起飞时间
          ctime:"",
          //记录选择的航空公司
          cCompany:"",
          cSize:"",
      }
  },
  mounted(){
    this.getAirList(),
    this.$store.commit('air/Set_searchInfo',{
      departCity:this.$route.query.departCity,
      destCity:this.$route.query.destCity,
      departDate:this.$route.query.departDate,
      departCode:this.$route.query.departCode,
      destCode:this.$route.query.destCode
    })
  },
  methods:{
    clearRecord(){
      this.$store.commit('air/Clear_Record')
    },
    change(){
      this.getAirList()
    },
    clear(){
      this.airport=""
      this.ctime=""
      this.cCompany=""
      this.cSize=""
      this.handle()
    },
    getRender(){
    //计算start位置和end位置
    let start=0+(this.PageIndex-1)*this.PageSize
    let end=this.PageSize+(this.PageIndex-1)*this.PageSize
    //划分开始和结束位置
    this.renderData=this.cflightsData.slice(start,end)
  },
  //elementui自带的current-change属性会传进来用户点击的页码数
  CurrentChange(page){
      this.PageIndex=page
      //更新render（呈现）即可实现换页功能
      this.getRender()
  },
  //处理每页显示个数变化时的函数
  handleSizeChange(size){
    this.PageSize=size
    this.getRender()
  },
  //获取机票信息,自动运行一次即可
  getAirList(){
      this.$axios({
        url:'/airs',
        params:this.$route.query,
      }).then(res=>{
        this.flightsData=res.data
        this.cflightsData=this.flightsData.flights
        this.getRender()
      })
    },
    handle(){
      this.cflightsData=this.flightsData.flights
      this.PageIndex=1
      if(this.airport!=""){
        this.cflightsData=this.flightsData.flights.filter(v=>v.org_airport_name === this.airport)
      }
      if(this.ctime!=""){
        let tmp=this.ctime.split('-')
        this.cflightsData=this.cflightsData.filter(v=>{
          return parseInt(v.dep_time.split(":")[0])>=tmp[0] && parseInt(v.dep_time.split(":")[0])<tmp[1] || 
          (parseInt(v.dep_time.split(":")[0])==tmp[0]&& parseInt(v.dep_time.split(":")[1])==0)
        })
      }
      if(this.cCompany!=""){
        //筛选后重新获取renderData的值即可
        this.cflightsData=this.cflightsData.filter(v=> v.airline_name===this.cCompany)
        //同时将底部选择页面设置为1
        this.PageIndex=1
      }
      if(this.cSize!=""){
        this.cflightsData=this.cflightsData.filter(v=> v.plane_size===this.cSize)
        this.PageIndex=1
      }
      this.getRender()
    }
  }
}

</script>

<style scoped lang="less">

    .flights-content{
        width:745px;
        font-size:14px;
    }

    .filters{
        margin-bottom:20px;
    }

    .filters-top{
        > div{
            /deep/ .el-select{
                margin-left:10px;
            }
        }
    }

    .filter-cancel{
        margin-top:10px;
    }

    .flight-title{
        padding:0 15px;
        border:1px #ddd solid;
        background:#f6f6f6;
        height:38px;
        line-height: 38px;
        color:#666;
        font-size:12px;
        margin-bottom: 10px;

        > div{
            text-align: center
        }
    }

    .flight-item{
        border:1px #ddd solid;
        margin-bottom: 10px;

        .flight-info{
            padding:15px;
            cursor: pointer;

            > div{
                &:first-child, &:last-child{
                    text-align: center;
                }
            }
        }

        .flight-info-center{
            padding:0 30px;
            text-align: center;

            .flight-airport{
                strong{
                    display: block;
                    font-size:24px;
                    font-weight: normal;
                }
                span{
                    font-size: 12px;
                    color:#999;
                }
            }

            .flight-time{
                span{
                    display: inline-block;
                    padding:10px 0;
                    border-bottom: 1px #eee solid;
                    color:#999;
                }
            }
        }

        .flight-info-right{
            
            .sell-price{
                font-size: 24px;
                color:orange;
                margin:0 2px;
            }
        }
        
    }

    .flight-recommend{
        background: #f6f6f6;
        border-top:1px #eee solid;
        padding:0 20px;

        .flight-sell{
            border-bottom:1px #eee solid;
            padding:10px 0;

            &:last-child{
                border-bottom: none;
            }

            .flight-sell-left{
                font-size: 12px;
                span{
                    color:green;
                }
            } 

            .price{
                font-size: 20px;
                color:orange;
            }

            .choose-button{
                text-align: center;
                color:#666;
                button{
                    display: block;
                    width:100%;
                    margin-bottom:5px;
                }
            }
        }
    }

    .flights-empty{
     text-align: center;
     color:#999;
     line-height: 2; 
    }

    /* ------------------------- */

    .contianer{
        width:1000px;
        margin:20px auto;

    }
    .aside{
        width:240px;
    }

    .statement{
        border:1px #ddd solid;

        .statement-list{
            padding: 10px 0;
            > div{
                text-align: center;
                i{
                    display: block;
                    font-size: 40px;
                }
                span{
                    font-size:12px;
                }
            }
        }
        .service-tel{
            height: 32px;
            line-height: 32px;
            padding:0 10px;
            background: #f6f6f6;
            font-size: 14px;
        }
    }

    .history{
        border:1px #ddd solid;
        padding:10px;
        margin-top:10px;

        h5{
            font-size: 16px;
            font-weight: normal;
            padding-bottom: 10px;
            border-bottom:1px #eee solid;
        }

        .history-item{
            padding:10px 0;
            font-size: 14px;
            border-bottom: 1px #eee solid;

            &:last-child{
                border:none;
            }

            .to-from{
                margin-bottom: 5px;
            }

            p{
                font-size: 12px;
                color:#666;
            }

            span{
                color:#fff;
                display: block;
                padding:2px 10px;
                background: orange;
                border-radius: 4px;
                font-size:12px;
                cursor: pointer;
            }
        }
    }

    
    
</style>